<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>我的</title>
	</head>
	<body>
		<main class="flex">
			<!-- 轮播图 -->
			<div id="banner" class="swiper">
				<div class="swiper-wrapper">
					<div id="swiper1" class="swiper-slide"></div>
					<div id="swiper2" class="swiper-slide"></div>
					<div id="swiper3" class="swiper-slide"></div>
				</div>
				<!-- 分页器 -->
				<div class="swiper-pagination"></div>
			</div>

			<!-- 用户名 -->
			<div class="user layout bgwhite">
				<div class="username m_b20">
					<div class="pic fl rel circle">
						<label>
							<img
								src="../../assets/imgs/avatar.jpg"
								class="avatar"
								alt=""
								id="avatar"
							/>
							<input type="file" class="head-pic" />
						</label>
						<!-- <img src="../../assets/imgs/avatar.jpg" alt="" />
						<input type="file" class="head-pic" id="picFile" /> -->
						<div class="vip fb f20 abs tcenter cwhite">VIP</div>
					</div>
					<span id="userName">用户名</span>
					<p class="fr">
						<span class="iconfont icon-xiaojiantou icon" id="toPersonal"></span>
					</p>
				</div>
				<p id="introduce">个性签名:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			</div>

			<!-- 今日打卡 -->
			<div class="punch layout bgwhite f_sb_acenter">
				<p class="fl f_acenter">
					<span class="iconfont icon-dongtaiquan cblue icon">&nbsp;</span>
					累计打卡 <span class="fb f28 cblue aend" id="punchTxt">23</span> 天
				</p>
				<p class="punchToday fb f18 b_box" id="punchBtn">今日打卡</p>
			</div>

			<!-- 个人动态 -->
			<div class="active layout bgwhite">
				<p class="fl f_acenter">
					<span class="iconfont icon-dongtaiwenben cblue icon">&nbsp;</span>
					个人动态
				</p>
				<p class="fr f_sb_acenter">
					<span>10条&emsp;</span>
					<span class="iconfont icon-xiaojiantou icon" id="toSocial"></span>
				</p>
			</div>

			<!-- 运动数据 -->
			<div class="data layout bgwhite">
				<div class="title">
					<p class="fl f_sb_acenter">
						<span class="iconfont icon-shujudongtai cblue icon">&nbsp;</span>
						运动数据
					</p>
					<p class="fr">
						<span class="iconfont icon-xiaojiantou icon" id="toSports"></span>
					</p>
				</div>

				<div class="dataDet">
					<ul class="f_sb">
						<li>
							<p class="m_b20">总运动</p>
							<p><span class="cblue">99999</span>分钟</p>
						</li>
						<li>
							<p class="m_b20">本周消耗</p>
							<p><span class="cblue">99999</span>千卡</p>
						</li>
					</ul>
				</div>
			</div>

			<!-- 我的运动徽章 -->
			<div class="badge bgwhite layout">
				<div class="title">
					<p class="fl f_sb acenter">
						<span class="iconfont icon-sharpicons_badge- cblue icon"
							>&nbsp;</span
						>
						我的运动徽章
					</p>
					<p class="fr">
						<span class="iconfont icon-xiaojiantou icon" id="toBadge"></span>
					</p>
				</div>

				<div class="badgePic f_sb">
					<div>
						<img src="../../assets/imgs/mybadge01.jpg" alt="" />
					</div>
					<div>
						<img src="../../assets/imgs/mybadge02.jpg" alt="" />
					</div>
					<div>
						<img src="../../assets/imgs/mybadge03.jpg" alt="" />
					</div>
				</div>
			</div>
		</main>
	</body>
</html>
